<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  姓名：<input type="text" class="username"> <br>
  年龄：<input type="text" class="age"> <br>
  <button>点击我添加</button>
  <script>
    let btn = document.querySelector("button");
    let usernameEle = document.querySelector(".username");
    let ageEle = document.querySelector(".age");
    btn.onclick = function () {
      let xhr = new XMLHttpRequest();
      let username = usernameEle.value;
      let age = ageEle.value;
      xhr.open("get", `/adduser?username=${username}&age=${age}`);
      xhr.send(); //发送http请求
      xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 300) {
          console.log(xhr.responseText);
          // 添加成功
          let xhr2 = new XMLHttpRequest();
          xhr2.open("get", "/getdata");
          xhr2.send();
          xhr2.onload = function () {
            console.log(xhr2.responseText);
            // 生成ul和li显示 获取到的数据
          }
        }
      }
    }
  </script>
</body>

</html>